<style type="text/css">
    .container {
        margin-top:10%;
    }
    .container, .input-form {
        text-align: center;
    }
    #txtName {
        width:300px;
        display:inline;
        font-size:26px;
        height:70px;
        padding:10px;
        text-align: center;
        margin-top:20px;
    }
    #btnSend {
        margin-top:15px;
        width: 100px;
        height: 50px;
        font-size:20px;
    }
</style>

<form method="post" action="/chat/set-name">
    <div class="container">
        <div>
            <div class="input-form">
                <div>与大家开始聊天之前，给自己取一个响当当的名字吧！</div>
                <input class="form-control" id="txtName" name="name" minlength="1" maxlength="7" value="${.Session.chat_name_temp}" placeholder="响当当的名字">
            </div>
            <div style="text-align: center"><button class="btn btn-primary" type="submit" id="btnSend">提 交</button></div>
        </div>
    </div>
</form>

<script type="application/javascript">
    $(function () {
        var err = "${.Session.chat_name_error}";
        if (err != "") {
            layer.msg(err);
        }
    });
</script>